<template>
  <div>
    <el-button @click="dialogFormVisible=true"
               type="primary">开始添加商品</el-button>
    <el-dialog :title="tstr"
               :visible.sync="dialogFormVisible">
      <el-row>
        <el-col :span="12"
                :offset="4">
          <el-form ref="myform"
                   :model="form"
                   label-width="100px">

            <el-form-item label="商品名称："
                          prop="pname">
              <el-input v-model="form.pname"></el-input>
            </el-form-item>

            <el-form-item label="商品类别：">
              <el-select v-model="form.sel"
                         placeholder="请选择活动区域">
                <el-option v-for="item in selOpt"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品原价"
                          prop="oldPrice">
              <el-input v-model="form.oldPrice"></el-input>
            </el-form-item>
            <el-form-item label="商品现价"
                          prop="price">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="商品库存"
                          prop="inventory">
              <el-input-number :min="1"
                               v-model="form.inventory"></el-input-number>
            </el-form-item>
            <el-form-item label="即时配送">
              <el-switch v-model="form.song"></el-switch>
            </el-form-item>

            <el-form-item label="商品性质"
                          prop="pdes">
              <el-checkbox-group v-model="form.pdes">
                <el-checkbox label="美食/餐厅线上活动"
                             name="type"></el-checkbox>
                <el-checkbox label="地推活动"
                             name="type"></el-checkbox>
                <el-checkbox label="线下主题活动"
                             name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光"
                             name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="是否标红">
              <el-radio-group v-model="form.isRed">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         @click="onSubmit">{{btnStr}}</el-button>
              <el-button @click="dialogFormVisible=false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 表格组件 -->
    <test-table ref="mytable"
                :sel="selOpt"
                @send="getData"></test-table>
  </div>
</template>

<script>
import testTable from './testTable.vue'
import { addPro } from '../api/test'
export default {
  components: { testTable },
  data () {
    return {
      dialogFormVisible: false,//弹出层显示隐藏
      tstr: "商品添加",
      btnStr: "添加商品",
      saveForm: {},
      form: {
        inventory: 1,//商品数量
        pname: '',
        price: "",
        pdes: [],
        oldPrice: "",
        sel: "",
        isRed: "",
        song: false,
      },
      selOpt: [
        { value: "1", label: "水果" },
        { value: "2", label: "熟食" },
        { value: "3", label: "酒水" },
        { value: "4", label: "零食" }
      ]
    }
  },
  beforeMount () {  //存储表单的初始状态
    this.saveForm = this.form;
  },
  methods: {
    getData (row) { //自定义事件接收子组件传来的数据
      this.form = row;
      this.dialogFormVisible = true;
      this.tstr = "商品修改";
      this.btnStr = "确认修改"
    },
    async onSubmit () {
      // 添加商品
      console.log(this.form)
      if (this.tstr == "商品添加") {
        this.form.action = "add";
      } else {
        this.form.action = "edit";
        this.form.id = this.form._id;
      }
      var res = await addPro(this.form)
      console.log(res)
      alert(res.data.success)
      this.tstr = "商品添加"
      this.btnStr = "添加商品"
      // 让子组件表格 从新加载列表
      this.$refs.mytable.getTableList();
      // 重置表单方法
      // await this.$nextTick(() => {
      // 重置表单所有的内容 需要在el-form-item 加prop属性
      this.form = this.saveForm;
      this.$refs.myform.resetFields()
      this.dialogFormVisible = false;//关闭弹出层
      // });

    }
  }
}
</script>

<style lang="scss" scoped>
</style>